<template>
	<div id="app">
		<Banner title="数据分析系统" />
		<div class="container_main">
			<div class="area_Up">
				<div class="right_Row">
					<AnalyzeData title="分析数据" />
					<TextData title="分析数据" />
				</div>
				<div class="right_ec">
					<div style="display:flex;width:76.3%;height:100%;justifyContent:space-between">
						<NumData />
						<DeepData />
					</div>
					<div style="width:23.5%">
						<DeepData2 />
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import Banner from "../components/home/Banner.vue";
	import AnalyzeData from "../components/home/AnalyzeData.vue";
	import NumData from "../components/home/NumData.vue";
	import TextData from "../components/home/TextData.vue";
	import DeepData from "../components/home/DeepData.vue";
	import DeepData2 from "../components/home/DeepData2.vue";
	// import StatisticalData from '../components/home/StatisticalData.vue'

	export default {
		name: "app",
		components: {
			Banner,
			AnalyzeData,
			TextData,
			NumData,
			DeepData,
			DeepData2
		}
	};
</script>

<style scoped lang="less">
	.container_main {
		width: 100%;
		height: 89%;
		/* background: pink; */
		box-sizing: border-box;
		padding: 2%;
		margin-top: -1%;
		padding-top: 0;
	}

	.area_Up {
		width: 100%;
		height: 100%;
		/* display: flex; */
	}

	.left_Row {
		width: 35%;
		margin-right: 2%;
	}

	.right_Row {
		width: 100.5%;
		height: 66%;
		display: flex;
		justify-content: space-between;
	}

	.right_ec {
		width: 100%;
		height: 36%;
		display: flex;
		justify-content: space-between;
		margin-top: 1%;
	}

	body {
		margin: 0;
		padding: 0;
		color: rgb(255, 255, 255);
		background-color: rgb(0, 16, 47);
	}

	#app {
		font-family: Avenir, Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		/* background-color: rgb(0, 16, 47); */
	}
</style>
